<template>
    <div>
        <el-dialog title="班级信息" :visible.sync="detailVisible" width="65%">
            <el-form ref="addClassData" :model="addClassData" label-width="90px" :rules="rules">
                <div style="display: flex;">
                    <el-form-item label="班级:" style="width: 300px;" prop="classname">
                        <el-input v-model.trim="addClassData.classname" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="教室:" style=" width: 300px;" prop="classroom">
                        <el-select v-model.trim="addClassData.classroom" placeholder="请选择教室">
                            <el-option label="201" value="201"></el-option>
                            <el-option label="202" value="202"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div style="display: flex;">
                    <el-form-item label="项目经理:" style="width: 300px;" prop="manger">
                        <el-input v-model.trim="addClassData.manger" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="班主任:" style="width: 300px;" prop="teacherman">
                        <el-input v-model.trim="addClassData.teacherman" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="就业:" style="width: 300px;" prop="job">
                        <el-input v-model.trim="addClassData.job" placeholder="请输入内容"></el-input>
                    </el-form-item>
                </div>
                <div style="display: flex;">
                    <el-form-item label="开班时间:" style="width: 300px;" prop="startime">
                        <el-date-picker v-model.trim="addClassData.startime" label="" type="date" placeholder="选择日期"
                            :picker-options="pickerOptionsStart" value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="结班时间:" style="width: 300px;" prop="endtime">
                        <el-date-picker v-model.trim="addClassData.endtime" type="date" placeholder="选择日期"
                            :picker-options="pickerOptionsEnd" value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                </div>
                <el-form-item label="班级备注:" width="100px" style="margin-top: 20px;width: 900px;">
                    <el-input v-model.trim="addClassData.classnote" placeholder="请输入内容" clearable></el-input>
                </el-form-item>
                <el-button type="primary" style="background-color: rgb(23, 97, 253);"
                    @click="addclass('addClassData')">提交</el-button>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import axios from "@/axios/index";
export default {
    name: 'addClass',
    data() {
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请选择结班日期'));
            } else if (value < this.addClassData.startime) {
                callback(new Error('结班日期不能小于开班日期!'));
            } else {
                callback();
            }
        };
        return {
            // 开始结束日期限制
            pickerOptionsStart: {
                disabledDate: (time) => {
                    if (this.addClassData.endTime) {
                        return (
                            time.getTime() >= new Date(this.addClassData.endTime).getTime()
                        );
                    }
                }
            },
            // 结束日期限制
            pickerOptionsEnd: {
                disabledDate: (time) => {
                    if (this.addClassData.startime) {
                        return (
                            time.getTime() <= new Date(this.addClassData.startime).getTime()
                        );
                    }
                }
            },
            detailVisible: false,
            value1: '',
            value2: '',
            addClassData: {
                classname: '',// 班级
                classroom: '',//教室
                manger: '',///项目经理
                teacherman: '',//班主任
                job: '',//就业
                startime: '',//开班时间
                endtime: '',//结班时间
                classnote: ''//备注
            },
            rules: {
                classname: [
                    { required: true, message: '请填写班级', trigger: 'blur' },
                ],
                classroom: [
                    { required: true, message: '请选择教室', trigger: 'change' }
                ],
                manger: [
                    { required: true, message: '请填写项目经理', trigger: 'blur' }
                ],
                teacherman: [
                    { required: true, message: '请填写班主任', trigger: 'blur' }
                ],
                job: [
                    { required: true, message: '请填写就业', trigger: 'blur' }
                ],
                startime: [
                    { required: true, message: '请选择开班日期', trigger: 'blur' }
                ],
                endtime: [
                    { required: true, message: '请选择结班日期', trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        init(data) {
            this.detailVisible = true;
        },
        //新增班级
        addclass(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$axios.post("/classmon/addClass", this.addClassData, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((response) => {
                        //跳转的页面写在此处
                        console.log(response);
                        if (response.data.status !== 0) {
                            return this.$message({
                                type: 'error',
                                message: '新增班级失败'
                            });
                        }
                        this.$message({
                            type: 'success',
                            message: '新增班级成功',
                        });
                        this.addClassData = {
                            classname: '',// 班级
                            classroom: '',//教室
                            manger: '',///项目经理
                            teacherman: '',//班主任
                            job: '',//就业
                            startime: '',//开班时间
                            endtime: '',//结班时间
                            classnote: ''//备注
                        };
                        this.$axios.get('/classmon/getClass',
                            { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((response) => {
                                this.tableData = response.data.data;
                                this.arr = response.data.data;
                            });
                        this.$emit('closeDialog', '这是传递给父组件的数据');
                        this.detailVisible = false;
                    });
                } else {
                    return false;
                }
            });
        }
    },
}
</script>

<style lang="less" scoped>
.el-date-editor.el-input {
    width: 210px;
}
</style>